<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        姓:<input type="text" v-model="firstName"><br>
        名:<input type="text" v-model="lastName">
        全名:<span>{{fullName}}</span>

    </div>
    <script src="../js/vue.js"></script>
    <script>
            Vue.config.productionTip=false//阻止vue启动时产生提示
           const vm= new Vue({
                 el: "#root",
                 data:{
                     firstName:'张',
                     lastName:'三',
                     fullName: '张三'

                    },
                watch:{
                    firstName(val){
                        setTimeout(()=>{
                        this.fullName=val+this.lastName;
                        },1000);

                    },
                    lastName(val){
                        this.fullName=this.firstName+val;
                    }

                }
             })
            //后续需要监听时调用vm
            /*vm.$watch('isHot',{
                immediate:true,//初始化时让handler调用一下
                //handler什么时候调用？当isHot发生改变的时候
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)}
            })*/
    </script>
</body>
</html>